<template>
  <div>ref和reactive</div>
  <p>{{ aaa }}</p>
  <ul>
    <li v-for="item in arr" :key="item.id">{{ item.name }}</li>
  </ul>
  <hr />
  {{ list }}
  <h2>计算属性 computed</h2>
  <ul>
    <li v-for="item in newArr" :key="item.id">
      {{ item.name }}
    </li>
  </ul>
  <hr>
  <h2>利用interface创建一个空对象</h2>
  {{ zxcv }}
  <hr>
  <h2>Object.assign更新对象</h2>
  {{ qqqq }}
</template>
<script setup lang='ts'>
import { ref, reactive, computed } from "vue";
//定义一个变量,这里不需要了
//简单地数据类型ref定义，ref函数内置了泛型函数
// ref用的比较多 ref定义的数据是响应式的 xxx.value = "" 视图也是响应式的
//reactive 也是响应式的 ，但是不能重新赋值，重新赋值后就不是响应式的
//reactive 定义的数据 修改，删除 新增是响应式的
const aaa = ref(100);
//传递类型， ref数据类型
const str = ref<string>("1111");
//复杂类型
//先定义类型别名
type ObjType = {
  id: number;
  name: string;
  isShow: boolean;
};
const arr = ref<ObjType[]>([
  {
    id: 1,
    name: "包子",
    isShow: true,
  },
  {
    id: 2,
    name: "油条",
    isShow: false,
  },
]);
//模拟场景：ref数据需要动态获取后台返回的数据[{},{}]
const list = ref<ObjType[]>([]);
//模拟请求
setTimeout(() => {
  list.value = [
    {
      id: 1,
      name: "包子",
      isShow: true,
    },
    {
      id: 2,
      name: "油条",
      isShow: true,
    },
  ];
}, 1500);

//创建一个空对象
interface qwe {
  id: number,
  name: string,
  flag: boolean,
  areaTree: any[],
}
const zxcv = ref<qwe>({
  id: 0,
  name: "",
  flag: false,
  areaTree:[{
    sex:"男",
    age:20,
  },{
    sex:"女",
    age:15,
  }]
})
interface obja {
  id:number,
  name:string
}
const qqqq = ref<obja>({
  id:1,
  name:"哈哈哈"
})
setTimeout(() => {
  zxcv.value.name = '修改名字';
  zxcv.value.id = 122;
  zxcv.value.areaTree.push({
    sex:"男男",
    age:112
  })
  qqqq.value = Object.assign(qqqq.value,{
    id:222,
    name:"22222"
  })
}, 10000);

//reactive
const obj = reactive({ name: "hello" })
const arr2 = reactive<(number | string)[]>([1, '2'])


//计算属性
const newArr = computed(() => {
  // const newArr = computed<ObjType[]>(()=>{
  return arr.value.filter(ele => {
    return ele.isShow
  })
})
// const newArr = computed<ObjType[]>(()=>{
//   return list.value.filter(ele=>{
//     return ele.isShow
//   })
// })
</script>
<style scoped lang='scss'></style>